<template>
	<view>
		<nav-bar title="订单消息"></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
            <view class="order_messages_list">
                <view class="messages_list" v-for="(item, index) of messageList" :key="index">
                    <swipe-action :options="options" @button="onDelete(index)">
                        <view class="list_box" @click="onPageJump(item,index)">
                            <image :src="item.messageIcon" mode="aspectFill"></image>
                            <text class="point" v-if="!item.readed"></text>
                            <view class="info_box">
                                <view class="header">
                                    <view class="title">{{ item.messageTitle }}</view>
                                    <view class="time">{{ item.createTime }}</view>
                                </view>
                                <view class="tip">{{ item.messageRecord }}</view>
                            </view>
                        </view>
                    </swipe-action>
                </view>
            </view>
        </mescroll-body>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import swipeAction from "@/components/common/swipe-action"
import MescrollMixin from "@/components/common/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
	components: {swipeAction},
	data() {
		return {
			downOption: {
				auto: false //是否在初始化后,自动执行downCallback; 默认true
			},
			messageList: [],
			options: [
				{
					text: '删除',
					style: {
						backgroundColor: '#bbb'
					}
				}
			]
		};
	},
	computed: {
		...mapState(['userInfo'])
	},
	//第一次加载
	onLoad(e) {
	},
	//页面显示
	onShow() {},
	//方法
	methods: {
		...mapMutations(['setUserInfo']),
        /*下拉刷新的回调 */
        downCallback() {
        	//联网加载数据
        	this.loadData(1);
        },
        /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
        upCallback(page) {
        	//联网加载数据
        	this.loadData(page.num);
        },
        loadData(pageNo) {
            let httpData = {
                pageNo: pageNo,
                pageSize: 15,
                orderMsg: true
            };
            this.$http
            	.post('api/msg/v1/list', httpData,{
            		load:false
            	}).then(res => {
            		uni.stopPullDownRefresh();
            		//方法一(推荐): 后台接口有返回列表的总页数 totalPage
            		this.mescroll.endByPage(res.data.length, res.pages); //必传参数(当前页的数据个数, 总页数)
            		
            		if (pageNo == 1) {
            			this.messageList = res.data;
            		} else {
            			this.messageList = this.messageList.concat(res.data);
            		}
            	}).catch(() => {
            		//联网失败, 结束加载
            		this.mescroll.endErr();
            	});
        },
		onPageJump(item,index) {
			if (!item.readed) {
				this.$http
					.post('api/msg/v1/del_read', {
						messageIds: [item.objId],
						del: false
					})
					.then(res => {
						this.messageList[index].readed = true;
						this.setUserInfo({
							orderMsgNum: this.userInfo.orderMsgNum - 1
						});
					});
			}
			if (item.messageType == 1201) {
				uni.navigateTo({
					url: '/pages/runLeg/helpBuyOrderDetails?orderNo=' + item.typeNo
				});
			} else if (item.messageType == 1301) {
				uni.navigateTo({
					url: '/pages/runLeg/helpOrderDetails?orderNo=' + item.typeNo
				});
			} else if (item.messageType == 1401) {
				uni.navigateTo({
					url: '/pages/runLeg/giveAwayOrderDetails?orderNo=' + item.typeNo
				});
			} else if (item.messageType == 1501) {
				uni.navigateTo({
					url: '/pages/delivery/orderDetails?orderNo=' + item.typeNo
				});
			} else if (item.messageType == 1701) {
				uni.navigateTo({
					url: '/pages/groupBuy/orderDetails?orderNo=' + item.typeNo
				});
			} else if (item.messageType == 1701) {
				uni.navigateTo({
					url: '/pages/groupBuy/orderDetails?orderNo=' + item.typeNo
				});
			}
		},
		onDelete(index) {
			uni.showModal({
				title: '操作',
				content: '确定要删除吗！',
				success: res => {
					if (res.confirm) {
						let item = this.messageList[index];
						this.$http
							.post('api/msg/v1/del_read', {
								messageIds: [item.objId],
								del: true
							})
							.then(res => {
								uni.showToast({
									title: '删除成功！',
									icon: 'none'
								});
								if (!item.readed) {
									this.setUserInfo({
										orderMsgNum: this.userInfo.orderMsgNum - 1
									});
								}
								this.messageList.splice(index, 1);
							});
					}
				}
			});
		}
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {},
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';

.order_messages_list {
	margin: 0 30rpx;
	.messages_list {
		margin-top: 20rpx;
	}
	.list_box {
		background-color: #ffffff;
		border-radius: 8rpx;
		padding: 30rpx;
		display: flex;
		align-items: center;
		width: 100%;
		position: relative;
		> image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			flex-shrink: 0;
		}
		.point {
			position: absolute;
			left: 126rpx;
			top: 40rpx;
			width: 20rpx;
			height: 20rpx;
			border-radius: 50%;
			background-color: red;
		}
		.info_box {
			margin-left: 30rpx;
			width: 100%;

			.header {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					font-size: 32rpx;
					color: #555555;
				}

				.time {
					font-size: 24rpx;
					color: #555555;
				}
			}

			.tip {
				margin-top: 20rpx;
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
}
</style>
